{% extends 'base_no_cart_count.html' %}
{% load staticfiles %}
{% block title %}天天生鲜-购物车{% endblock title %}
{% block page_title %}购物车{% endblock page_title %}
{% block topfiles %}
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script>
    $(function () {
        update_all_goods_info()
        update_cart_count()
        // 计算商品的小计，总计和总数目
        function update_all_goods_info() {
            // 保存商品的总数目和总价格
            goods_total_count = 0
            goods_total_price = 0
            // 获取商品所在的ul,要求ul中的checkbox被选中
            $('.cart_list_td').find(':checked').parents('ul').each(function () {
                // $(this)就是每一个商品ul update_goods_info(goods_ul)
                // 获取商品的价格和数目
                /*
                goods_price = $(this).children('.col05').text()
                goods_price = parseFloat(goods_price)
                goods_count = $(this).find('.num_show').val()
                goods_count = parseInt(goods_count)
                // 计算商品的小计
                total_price = goods_price*goods_count
                // 设置商品的小计
                $(this).children('.col07').text(total_price.toFixed(2)+'元')*/
                res_dict = update_goods_info($(this))
                // 累加
                goods_total_count += res_dict['goods_count']
                goods_total_price += res_dict['total_price']
            })
            // 设置商品的总数目和总计
            $('.settlements').find('em').text(goods_total_price.toFixed(2))
            $('.settlements').find('b').text(goods_total_count)
        }

        // 计算商品的小计
        function update_goods_info(goods_ul) {
            // 获取商品的价格和数目
            goods_price = goods_ul.children('.col05').text()
            goods_price = parseFloat(goods_price)
            goods_count = goods_ul.find('.num_show').val()
            goods_count = parseInt(goods_count)
            // 计算商品的小计
            total_price = goods_price*goods_count
            // 设置商品的小计
            goods_ul.children('.col07').text(total_price.toFixed(2)+'元')
            return {'goods_count':goods_count, 'total_price':total_price}
        }

        // 更新页面上购物车中商品的总数目
        function update_cart_count() {
            $.get('/cart/count/', function (data) {
                // {'res':商品总数}
                $('.total_count').children('em').text(data.res)
            })
        }

        // 全选和全不选
        $('.settlements').find(':checkbox').change(function () {
            // $(this)就是全选checkbox
            is_checked = $(this).prop('checked')
            // alert(is_checked)
            $('.cart_list_td').find(':checkbox').each(function () {
                // $(this)就是商品对应的每一个checkbox
                $(this).prop('checked', is_checked)
            })
            // 更新商品的总计和总数目
            update_all_goods_info()
        })

        // 商品对应的checkbox状态发生改变时，全选checkbox对应发生改变
        $('.cart_list_td').find(':checkbox').change(function () {
            // 1.获取所有商品的checkbox的数目
            all_len = $('.cart_list_td').find(':checkbox').length
            // 2.获取所有被选中的商品的checkbox数目
            checked_len = $('.cart_list_td').find(':checked').length
            //alert(all_len+':'+checked_len)
            if (checked_len < all_len){
                // 设置全选checkbox为不选中状态
                $('.settlements').find(':checkbox').prop('checked', false)
            }
            else {
                // 设置全选checkbox为选中状态
                $('.settlements').find(':checkbox').prop('checked', true)
            }
            // 更新商品的总计和总数目
            update_all_goods_info()
        })

        // 更新购物车中商品的数目
        error_update = false
        function update_remote_cart_info(goods_id, goods_count) {
            // 设置ajax请求为同步
            $.ajaxSettings.async = false
            $.get('/cart/update/?goods_id='+goods_id+'&goods_count='+goods_count, function (data) {
                // 更新成功 {'res':1}
                // 更新失败 {'res':0}
                if (data.res == 0){
                    error_update = true
                }
                else {
                    error_update = false
                }
            })
            // 设置ajax请求为异步
            $.ajaxSettings.async = true
        }

        //商品数目的增加
        $('.add').click(function () {
            // 1.获取原有的数目和商品的id
            goods_count = $(this).next().val()
            goods_id = $(this).next().attr('goods_id')
            // alert(goods_count+':'+goods_id)
            // 2.加１
            goods_count = parseInt(goods_count)+1
            // 更新购物车表中的数据
            // 发起一个ajax请求，携带参数：一个是商品的数目，另外一个是商品的id
            update_remote_cart_info(goods_id, goods_count)

            if (error_update == false){
                // 3.重新设置
                $(this).next().val(goods_count)
                is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
                if (is_checked){
                    // 更新商品的总计和总数目
                    update_all_goods_info()
                }
                else{
                    // 更新商品的小计
                    update_goods_info($(this).parents('ul'))
                }
                // 更新购物车商品的总数
                update_cart_count()
            }
        })

        //商品数目的减少
        $('.minus').click(function () {
            // 1.获取原有的数目和商品的id
            goods_count = $(this).prev().val()
            goods_id = $(this).prev().attr('goods_id')
            // alert(goods_count+':'+goods_id)
            // 2.减１
            goods_count = parseInt(goods_count)-1
            if (goods_count > 0){
                // 更新购物车表中的数据
                // 发起一个ajax请求，携带参数：一个是商品的数目，另外一个是商品的id
                update_remote_cart_info(goods_id, goods_count)
                if (error_update == false){
                    // 3.重新设置
                    $(this).prev().val(goods_count)
                    is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
                    if (is_checked){
                        // 更新商品的总计和总数目
                        update_all_goods_info()
                    }
                    else{
                        // 更新商品的小计
                        update_goods_info($(this).parents('ul'))
                    }
                    // 更新购物车商品的总数
                    update_cart_count()
            }
            }
        })

        // 保存编辑之前商品的数目
        pre_goods_count = 0
        $('.num_show').focus(function () {
            pre_goods_count = $(this).val()
        })

        //手动输入商品数目
        $('.num_show').blur(function () {
            // 1.获取原有的数目和商品的id
            goods_count = $(this).val()
            goods_id = $(this).attr('goods_id')
            // alert(goods_count+':'+goods_id)
            // 判断用户输入的数据是否合法
            if (isNaN(goods_count)||goods_count.trim().length==0||parseInt(goods_count)<0){
                $(this).val(pre_goods_count)
            }
            else
            {
                goods_count = parseInt(goods_count)
                // 更新购物车表中的数据
                // 发起一个ajax请求，携带参数：一个是商品的数目，另外一个是商品的id
                update_remote_cart_info(goods_id, goods_count)
                if (error_update == false){
                    // 3.重新设置
                    $(this).val(goods_count)
                    is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
                    if (is_checked){
                        // 更新商品的总计和总数目
                        update_all_goods_info()
                    }
                    else{
                        // 更新商品的小计
                        update_goods_info($(this).parents('ul'))
                    }
                    // 更新购物车商品的总数
                    update_cart_count()
                }
                else
                {
                    $(this).val(pre_goods_count)
                }
            }
        })

        // 删除购物车中的商品
        $('.cart_list_td').children('.col08').children('a').click(function () {
            // 发起一个请求，删除购物车中对应记录，携带goods_id
            goods_ul = $(this).parents('ul')
            goods_id = $(this).parents('ul').find('.num_show').attr('goods_id')
            // alert(goods_id)
            $.get('/cart/del/?goods_id='+goods_id, function (data) {
                // {'res':1 } 删除成功 {'res':0} 删除失败
                if (data.res == 1){
                    // 移除页面上对应ul
                    // 移除自身以及子元素　empty() 移除子元素
                    goods_ul.remove()
                    // 获取goods_ul中checkbox的选中状态
                    is_checked = goods_ul.find(':checkbox').prop('checked')
                    if (is_checked){
                        update_all_goods_info()
                    }
                    update_cart_count()
                }
            })
        })
    })
    </script>

{% endblock topfiles %}
{% block body %}
	<div class="total_count">全部商品<em>2</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
    <form method="post" action="/order/place/">
    {% csrf_token %}
    {% for cart_info in cart_list %}
	<ul class="cart_list_td clearfix">
		<li class="col01"><input type="checkbox" name="cart_id_list"  value="{{ cart_info.id }}" checked></li>
		<li class="col02"><img src="{% static cart_info.goods.goods_image %}"></li>
		<li class="col03">{{ cart_info.goods.goods_name }}<br><em>{{ cart_info.goods.goods_price }}元/{{ cart_info.goods.goods_unite }}</em></li>
		<li class="col04">{{ cart_info.goods.goods_unite }}</li>
		<li class="col05">{{ cart_info.goods.goods_price }}元</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl">+</a>
				<input type="text" goods_id="{{ cart_info.goods.id }}"  class="num_show fl" value="{{ cart_info.goods_count }}">
				<a href="javascript:;" class="minus fl">-</a>	
			</div>
		</li>
		<li class="col07">25.80元</li>
		<li class="col08"><a href="javascript:;">删除</a></li>
	</ul>
    {% endfor %}
	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>42.60</em><br>共计<b>2</b>件商品</li>
		<li class="col04"><input type="submit" value="去结算"></li>
	</ul>
    </form>
{% endblock body %}